<!--
 * @Author: fengYM feng25321@163.com
 * @Date: 2023-10-07 09:39:50
 * @LastEditors: fengYM feng25321@163.com
 * @LastEditTime: 2023-10-17 14:23:50
 * @Description: 登录
-->
<template>
  <view class="con">
    <u-navbar title="" :rightText="!loginStatus ? '密码登录' : '验证码登录'" @rightClick="loginToggle" @leftClick="goHome"></u-navbar>
    <view class="title">{{ loginStatus ? "密码登录" : "验证码登录" }} </view>
    <view class="inputBox">
      <u-input v-model="formData.cell" placeholder="请输入手机号" border="none"></u-input>
    </view>
    <view class="inputBox" v-if="loginStatus">
      <u-input v-model="formData.loginPwd" placeholder="请输入密码" border="none" :password="isPass">
        <template #suffix>
          <view style="display: flex; align-items: center">
            <u-icon name="eye-off" color="#bfbfbf" size="28" v-if="isPass" @click="isPass = false"></u-icon>
            <u-icon name="eye" color="#bfbfbf" size="28" v-else @click="isPass = true"></u-icon>
            <text class="wjmm" @click="goPage('/pages/login/forgetPassWord')">忘记密码</text>
          </view>
        </template>
      </u-input>
    </view>
    <view class="inputBox" v-else>
      <up-input v-model="formData.checkCode" placeholder="请输入验证码" border="none">
        <template #suffix>
          <up-code ref="uCodeRef" @change="codeChange" seconds="60" changeText="X秒重新获取"></up-code>
          <view @tap="getCode" class="wjmm" style="color: #426efe">{{ tips }}</view>
        </template>
      </up-input>
    </view>

    <view class="radioBox">
      <u-radio-group>
        <u-radio :customStyle="{ marginTop: '12px' }" label="" name=""> </u-radio>
      </u-radio-group>
      <view class="text">登录即同意<text>《用户协议》</text>和<text>《隐私政策》</text></view>
    </view>
    <u-button type="primary" @click="submit">登录</u-button>
    <view class="register" @click="goPage('/pages/login/register')">立即注册</view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { goPage } from "../../utils/commonFn";
import { smsSend, userLogin } from "../../api/login";
const isPass = ref(true);
const loginStatus = ref(true);
const loginToggle = () => {
  loginStatus.value = !loginStatus.value;
  formData.value.loginPwd = "";
  formData.value.checkCode = "";
};
const tips = ref("发送验证码");
const uCodeRef = ref<any>(null);
const codeChange = (text: string) => {
  tips.value = text;
};
const formData = ref({
  cell: "",
  loginPwd: "",
  checkCode: "",
});
const getCode = () => {
  console.log(uCodeRef.value.canGetCode);
  if (uCodeRef.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: "正在获取验证码",
    });
    smsSend({ cell: formData.value.cell }).then((res: any) => {
      uni.hideLoading();
      // 这里此提示会被this.start()方法中的提示覆盖
      uni.showToast({
        title: "验证码已发送",
        icon: "none",
      });
      // 通知验证码组件内部开始倒计时
      uCodeRef.value.start();
      console.log(res);
    });
  } else {
    uni.showToast({
      title: "倒计时结束后再发送",
      icon: "none",
    });
  }
};
const submit = async () => {
  const res = await userLogin(formData.value);
  uni.setStorageSync("userId", res.userId);
  uni.showToast({
    title: "登录成功",
    complete: () => {
      uni.switchTab({
        url: "/pages/home/home",
      });
    },
  });
};
const goHome = () => {
  uni.switchTab({
    url: "/pages/home/home",
  });
};
</script>

<style lang="less" scoped>
.con {
  background: #fff;
  height: calc(100vh - 144rpx);
  padding: 144rpx 64rpx 0;
  /deep/ .u-navbar__content__right__text {
    color: #426efe;
  }
  .title {
    font-size: 56rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 80rpx;
    margin-bottom: 50rpx;
  }
  .inputBox {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f9f9f9;
    .wjmm {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 34rpx;
      margin-left: 15rpx;
    }
  }
  .radioBox {
    display: flex;
    align-items: center;
    margin-top: 40rpx;
    margin-bottom: 120rpx;

    .text {
      margin-top: 10rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #a6a9af;
      line-height: 34rpx;
      text {
        color: #426efe;
      }
    }
  }
  .register {
    text-align: center;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #426efe;
    line-height: 40rpx;
    margin-top: 40rpx;
  }
}
/deep/ .u-radio-group {
  flex: none;
}
</style>
